import router, { asyncRoutes } from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 导入路由标题
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

// 白名单
const whiteList = ['/login', '/404'] // no redirect whitelist

// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // console.log(to.meta.title)  //获取路由对象中的标题
  // console.log(document.title) // 获取到页面标题
  // 给标题重新赋值
  document.title = getPageTitle(to.meta.title)
  // 先获取token
  const token = store.state.user.token

  // 开启进度条
  NProgress.start()
  // 判断是否有token
  if (token) {
    // 判断是否是登录页
    if (to.path === '/login') {
      // 如果是登录页,放行跳转到主页
      next('/')
    } else {
      // 1.判断有没有用户信息
      if (!store.getters.userId) {
        // 2.如果没有就从vuex中获取用户信息 -> 用户的权限信息
        const menus = await store.dispatch('user/getUserInfo')

        // 3.根据后端返回的权限信息,从本地预置的 8 个路由里面筛选出当前用户有权访问的路由
        const filterRoutes = asyncRoutes.filter(route => {
          // 获取到每一个路由规则的名称
          const routeName = route.children[0].name
          // 判断获取到的路由名称在不在menus权限信息中
          return menus.includes(routeName)
        })

        // 解决404页面刷新问题,将通配符放到筛选好的路由后面
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })

        // 使用vue-router中的addRoutes方法,将筛选出来的路由 动态添加到路由对象中
        // 4.通过addRoutes 动态添加的路由,是存到数组中的,并不会对routes产生影响
        // addRoutes 异步加载我们的动态路由
        router.addRoutes(filterRoutes)

        // 5.左侧菜单是从vue-router的routes获取的数据进行渲染,将左侧菜单数据获取方式进行调用
        store.commit('permission/setRoutes', filterRoutes)

        // 解决切换用户以后,新的用户访问不了一个用户菜单的情况
        // 获取当前用户的最终路由表,然后判断我们访问的路径在不在最终的路由表中
        const allpath = store.state.permission.routes.map(item => item.path)

        // 通过addRoutes 添加的路由,访问以后会存在白屏的问题
        // 原因是Vue-router的已知BUG
        // 之前是没有这些路由的,然后我们使用addRoutes添加以后才有的路由规则
        // 如果这时候想访问动态添加的路由,必须手动告诉vue-router我要去哪里
        if (to.path === '/employees/detail') {
          next({
            path: to.fullPath
          })
        } else {
          next({
            path: allpath.includes(to.path) ? to.path : '/',
            replace: true // 会调用router.replace方法,清空之前的浏览历史,等于是重新进入路由
          })
        }
      }

      // 如果存在token,访问的是其他页面,直接放行
      next()
    }
  } else { // 如果没有token,判断是否在白名单中
    if (whiteList.includes(to.path)) {
      next()
    } else { // 不在白名单中就跳转到登录页
      next('/login')
    }
  }

  NProgress.done()
})

// 后置守卫
router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
